<template>
  <j-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="取消"
    okText="确定"
  >
    <a-spin :spinning="loading">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="产品类别">
                <a-input
                  v-model="queryParam.productCategory"
                  placeholder="请输入产品类别"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="产品规格">
                <a-input
                  v-model="queryParam.productSpec"
                  placeholder="请输入产品规格"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <span>已选择 {{ selectedRowKeys.length }} 项</span>
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{x: 1200}"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
        @change="handleTableChange"
      >
        <template slot="baseRate" slot-scope="text">
          <span style="color: #1890ff; font-weight: bold">¥{{ text }}</span>
        </template>

        <template slot="difficultyFactor" slot-scope="text">
          <a-tag color="orange">{{ text }}倍</a-tag>
        </template>

        <template slot="qualityBonusRate" slot-scope="text">
          <a-tag color="green">{{ text }}%</a-tag>
        </template>

        <template slot="efficiencyBonusRate" slot-scope="text">
          <a-tag color="blue">{{ text }}%</a-tag>
        </template>

        <template slot="status" slot-scope="text">
          <a-badge v-if="text == 1" status="success" text="有效" />
          <a-badge v-else status="error" text="无效" />
        </template>

        <template slot="isDefault" slot-scope="text">
          <a-badge v-if="text == 1" status="success" text="是" />
          <a-badge v-else status="default" text="否" />
        </template>
      </a-table>
    </a-spin>
  </j-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'PieceRateStandardSelectModal',
  mixins: [JeecgListMixin],
  data() {
    return {
      title: '选择计件标准',
      visible: false,
      confirmLoading: false,
      workTypeId: '',
      workTypeName: '',
      queryParam: {
        productCategory: '',
        productSpec: ''
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
            return parseInt(index) + 1 + (this.ipagination.current - 1) * this.ipagination.pageSize
          }
        },
        {
          title: '产品类别',
          align: 'center',
          dataIndex: 'productCategory',
          width: 120
        },
        {
          title: '产品规格',
          align: 'center',
          dataIndex: 'productSpec',
          width: 150
        },
        {
          title: '基础单价(元/件)',
          align: 'center',
          dataIndex: 'baseRate',
          width: 130,
          scopedSlots: { customRender: 'baseRate' }
        },
        {
          title: '难度系数',
          align: 'center',
          dataIndex: 'difficultyFactor',
          width: 100,
          scopedSlots: { customRender: 'difficultyFactor' }
        },
        {
          title: '质量奖励比例(%)',
          align: 'center',
          dataIndex: 'qualityBonusRate',
          width: 130,
          scopedSlots: { customRender: 'qualityBonusRate' }
        },
        {
          title: '效率奖励比例(%)',
          align: 'center',
          dataIndex: 'efficiencyBonusRate',
          width: 130,
          scopedSlots: { customRender: 'efficiencyBonusRate' }
        },
        {
          title: '生效日期',
          align: 'center',
          dataIndex: 'effectiveDate',
          width: 100
        },
        {
          title: '失效日期',
          align: 'center',
          dataIndex: 'expireDate',
          width: 100
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          width: 80,
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '是否默认',
          align: 'center',
          dataIndex: 'isDefault',
          width: 90,
          scopedSlots: { customRender: 'isDefault' }
        }
      ],
      url: {
        list: '/mes/pieceRateStandard/getByWorkType'
      }
    }
  },
  methods: {
    show(workTypeId, workTypeName) {
      this.workTypeId = workTypeId
      this.workTypeName = workTypeName
      this.title = `选择计件标准 - ${workTypeName}`
      this.visible = true
      this.queryParam.workTypeId = workTypeId
      this.loadData(1)
    },
    searchQuery() {
      this.loadData(1)
    },
    searchReset() {
      this.queryParam = {
        productCategory: '',
        productSpec: '',
        workTypeId: this.workTypeId
      }
      this.loadData(1)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectedRows
    },
    onClearSelected() {
      this.selectedRowKeys = []
      this.selectionRows = []
    },
    handleOk() {
      if (this.selectedRowKeys.length === 0) {
        this.$message.warning('请选择一个计件标准')
        return
      }
      const selectedStandard = this.selectionRows[0]
      this.$emit('ok', selectedStandard)
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
      this.selectedRowKeys = []
      this.selectionRows = []
      this.queryParam = {
        productCategory: '',
        productSpec: ''
      }
    },
    // 重写loadData方法以适配getByWorkType接口
    loadData(arg) {
      if (!this.queryParam.workTypeId) {
        return
      }
      this.loading = true
      const params = {
        workTypeId: this.queryParam.workTypeId,
        productCategory: this.queryParam.productCategory,
        productSpec: this.queryParam.productSpec
      }
      this.getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result || []
          this.ipagination.total = this.dataSource.length
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getQueryParams() {
      const sqp = {}
      const param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return param
    }
  }
}
</script>

<style scoped>
.table-page-search-wrapper {
  padding: 16px;
  margin-bottom: 16px;
  background: #fafafa;
  border-radius: 6px;
}

.table-operator {
  margin-bottom: 18px;
}

.table-operator > span {
  color: rgba(0, 0, 0, 0.45);
}
</style>
